<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
        -moz-user-select: none;
        /*火狐*/
        -webkit-user-select: none;
        /*webkit浏览器*/
        -ms-user-select: none;
        /*IE10*/
        -khtml-user-select: none;
        /*早期浏览器*/
        -o-user-select: none;
        user-select: none;
      }

      .bigBox {
        width: 50%;
        background-color: #ac8c3e;
        margin: 40px auto;
        box-sizing: border-box;
        padding: 20px;
        border-radius: 30px;
        box-shadow: 0px 0px 30px 9px #939393;
      }

      .container {
        margin: 0 auto;
        text-align: center;
        padding: 20px;
      }

      textarea {
        width: 100%;
        height: 200px;
        margin: 20px 0;
        font-size: 20px;
        border: none;
      }

      .operate {
        width: 20%;
        margin: 0 auto;
        text-align: center;
      }

      button {
        font-size: 24px;
        padding: 10px 20px;
        background-color: #007bff;
        color: #fff;
        border: none;
        border-radius: 5px;
        cursor: pointer;
      }

      #timer {
        font-size: 48px;
        margin: 20px;
      }
    </style>
  </head>

  <body>
    <div class="bigBox">
      <div class="container">你准备好了吗？</div>
      <textarea
        name=""
        placeholder="开始输入..."
        id=""
        style="resize: none"
        cols="30"
        rows="10"
      ></textarea>
      <div class="operate">
        <button>开始</button>
        <div id="timer">60</div>
      </div>
    </div>

    <script>
      const text =
        "Believe in yourself and all that you are. Know that there is something inside you that is greater than any obstacle. This quote by Christian D. Larson reminds us that we all have the power within us to overcome any obstacle we may face. When we have confidence in ourselves and our abilities, we can achieve great things. So, let's trust ourselves, believe in our dreams, and work hard to make them a reality.";

      const container = document.querySelector(".container");
      const input = document.querySelector("textarea");
      const button = document.querySelector("button");
      const timer = document.getElementById("timer");
      input.value = "";

      let countdown;

      function startGame() {
        // 游戏开始后，禁用按钮
        button.disabled = true;

        // 显示文本
        container.textContent = text;

        // 启动倒计时
        countdown = setInterval(() => {
          const remainingTime = parseInt(timer.textContent) - 1;
          if (remainingTime === 0) {
            // 时间用完，游戏结束
            endGame();
          }

          timer.textContent = remainingTime;
        }, 1000);
      }

      function endGame() {
        // 停止倒计时
        clearInterval(countdown);

        // 计算得分
        const score = calculateScore();
        const scoreMessage = `你的得分是 ${score} 分！`;
        container.textContent = scoreMessage;

        button.disabled = false;
      }

      function calculateScore() {
        const userText = input.value.trim();
        const correctText = text.trim();
        const userWords = userText.split(" ");
        const correctWords = correctText.split(" ");
        let score = 0;

        for (let i = 0; i < userWords.length; i++) {
          console.log(userWords[i], correctWords[i]);
          if (userWords[i] === correctWords[i]) {
            score++;
          }
        }

        return score;
      }

      // 添加按钮点击事件监听器
      button.addEventListener("click", () => {
        // 设置倒计时时间
        timer.textContent = "60";

        // 清空输入框和输出文本区域
        input.value = "";
        container.textContent = "";

        // 启动游戏
        startGame();
      });
    </script>
  </body>
</html>
